<template>
    <div class="app-container">
      讲师列表
  
      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="teacherQuery.name" placeholder="讲师名" />
        </el-form-item>
  
        <el-form-item>
          <el-select
            v-model="teacherQuery.level"
            clearable
            placeholder="讲师头衔"
          >
            <el-option :value="1" label="高级讲师" />
            <el-option :value="2" label="首席讲师" />
          </el-select>
        </el-form-item>
  
        <el-form-item label="添加时间">
          <el-date-picker
            v-model="teacherQuery.begin"
            type="datetime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="teacherQuery.end"
            type="datetime"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          />
        </el-form-item>
  
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getTeacherPageQuery()"
          >查询</el-button
        >
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form>
      <!-- 表格 -->
      <!-- :data是表示绑定data这个数据 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="数据加载中"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (current - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
  
        <el-table-column prop="name" label="名称" width="80" />
  
        <el-table-column label="头衔" width="80">
          <template slot-scope="scope">
            {{ scope.row.level === 1 ? "高级讲师" : "首席讲师" }}
          </template>
        </el-table-column>
  
        <el-table-column prop="intro" label="资历" />
  
        <el-table-column prop="gmtCreate" label="添加时间" width="160" />
  
        <el-table-column prop="sort" label="排序" width="60" />
  
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <!-- vue的执行流程是，通过这里的连接到路由，如何再从路由跳转到页面 -->
            <router-link :to="'/teacher/edit/' + scope.row.id">
              <el-button type="primary" size="mini" icon="el-icon-edit"
                >修改</el-button
              >
            </router-link>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="removeDataById(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
        :current-page="current"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="getTeacherPageQuery"
      />
    </div>
  </template>
  <!-- 在这里写js代码 -->
  <script>
  import teacher from "@/api/teacher";
  
  export default {
    data() {
      return {
        current: 1, //页码
        limit: 10, //每页多少行
        teacherQuery: {}, //查询条件
        list: [], //列表数据
        total: 1, //总记录数
      };
    },
    created() {
      this.getTeacherPageQuery();
    },
    methods: {
      //current=1 Es6的新特性，这么写可以保证调用这个方法不传值，他会有一个默认值1
      //为什么会有传值进来，因为我们分页点击上一页或者下一页会调用我们这个方法
      getTeacherPageQuery(current = 1) {
        //current这个用我们调用这个方法传进来的值
        teacher
          .getTeacherPageVo(current, this.limit, this.teacherQuery)
          .then((response) => {
            console.log(response);
            this.list = response.data.records;
            this.total = response.data.total;
          });
      },
      //清空表单
      resetData() {
        this.teacherQuery = {};
        this.getTeacherPageQuery();
      },
      //根据id删除
      removeDataById(id) {
        this.$confirm("此操作将永久删除该讲师, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            teacher.delTeacherById(id).then((response) => {
              if (response.success) {
                //删除成功
                console.log("删除成功");
                //刷新页面
                this.getTeacherPageQuery();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                console.log('删除失败')
                this.$message({
                  type: "error",
                  message: "删除失败!",
               
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
    },
  };
  </script>